<template>
    <div>
        <h1>房间号列表</h1>
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td>房间号</td>
                    <td>房间类型</td>
                    <td>房间门店</td>
                    <td>是否有早餐</td>
                    <td>是否有窗</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info.list">
                    <td>{{ a.HouseNumber }}</td>
                    <td>{{ a.HouseType }}</td>
                    <td>{{ a.HouseAddr }}</td>
                    <td>{{ a.BackFood == 1 ? "包含早餐" : "不含早餐" }}</td>
                    <td>{{ a.SFChuang == 1 ? "有窗" : "无窗" }}</td>
                    <td>{{ a.State == 1 ? "启用" : "禁用" }}</td>
                    <td>{{ a.CreateTime.substring(0, 10) }}</td>
                    <td>
                        <input type="button" value="启用" class="btn btn-info" @click="updatestate(a.Id, 1)"
                            v-if="a.State == 0">
                        <input type="button" value="禁用" class="btn btn-info" @click="updatestate(a.Id, 0)"
                            v-if="a.State == 1">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span> 每 页 {{ data.pagesize }} 条 , 总 {{ info.Hnum }} 条 , 总 {{ info.Ynum }} 页 , 当 前 {{ data.pageindex }} / {{
                info.Ynum }} 页 </span> &nbsp;&nbsp;&nbsp;
            <input type="button" value="首页" class="btn btn-primary" @click="getlist(1)">&nbsp;&nbsp;&nbsp;
            <input type="button" value="上一页" class="btn btn-primary"
                @click="getlist(data.pageindex - 1)">&nbsp;&nbsp;&nbsp;
            <a @click="getlist(a)" v-for="a in info.Ynum">&nbsp; {{ a }} &nbsp;</a>&nbsp;&nbsp;&nbsp;
            <input type="button" value="下一页" class="btn btn-primary"
                @click="getlist(data.pageindex + 1)">&nbsp;&nbsp;&nbsp;
            <input type="button" value="尾页" class="btn btn-primary" @click="getlist(info.Ynum)">&nbsp;&nbsp;&nbsp;
            <select v-model="data.pagesize" @change="list">
                <option :value="a" v-for="a in h">每页{{ a }} 条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter();

onMounted(() => {
    show();
})

let info: any = reactive([])

let data: any = reactive({
    pageindex: 1,
    pagesize: 2,
})

let h: any = ref([2, 5, 10, 50, 100])

const show = () => {
    axios({
        url: 'https://localhost:7086/api/Housenumber/Show',
        method: 'get',
        params: data
    })
        .then((res) => {
            console.log(res.data);
            Object.assign(info, res.data);
        })
}

const list = () => {
    data.pageindex = 1;
    show();
}

const getlist = (num: any) => {
    if (num < 1) {
        data.pageindex = 1;
        show();
        return;
    }
    if (num > info.Ynum) {
        data.pageindex = info.Ynum;
        show();
        return;
    }
    data.pageindex = num;
    show();
}

const del = (id: any) => {
    if (confirm('确认删除吗?')) {
        axios({
            url: 'https://localhost:7086/api/Housenumber/Del',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert('删除成功!');
                    list();
                    return;
                }
                else {
                    alert('删除失败!');
                    return;
                }
            })
    }
}

const updatestate = (id: any, state: any) => {
    axios({
        url: 'https://localhost:7086/api/Housenumber/UpdateStae',
        method: 'put',
        params: {
            id: id,
            state: state
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('状态更改成功!');
                list();
                return;
            }
            else {
                alert('状态更改失败!');
                return;
            }
        })
}
</script>

<style scoped></style>